<template>
  <div class='content'>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-7 ref='pie7' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-4 ref='pie4' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-5 ref='pie5' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-6 ref='pie6' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-8 ref='pie8' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-9 ref='pie9' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-10 ref='pie10' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-11 ref='pie11' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie4")'
                   style="width:432px;height:400px">
      <pie-style-12 ref='pie12' />
    </box-container>

    <box-container class='bg-grey'
                   :spinShow='spinShow1'
                   @showOptionHandler='showOption("pie1")'>
      <pie-style-1 sid='pie1'
                   :source='eventTypeFetchData'
                   :radiusDic='pieRadius1'
                   ref='pie1' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow2'
                   @showOptionHandler='showOption("pie2")'>
      <pie-style-2 sid='pie2'
                   :source='caringObjectFetchData'
                   ref='pie2' />
    </box-container>
    <box-container class='bg-grey'
                   :spinShow='spinShow3'
                   @showOptionHandler='showOption("pie3")'>
      <pie-style-3 sid='pie3'
                   :source='eventHandlingData'
                   ref='pie3' />
    </box-container>
  </div>
</template>
<script>
import boxContainer from '../common/box-container'
import Pie1 from '../../cell/pie/pie-style-1'
import Pie2 from '../../cell/pie/pie-style-2'
import Pie3 from '../../cell/pie/pie-style-3'
import Pie4 from '../../cell/pie/pie-style-4'
import Pie5 from '../../cell/pie/pie-style-5'
import Pie6 from '../../cell/pie/pie-style-6'
import Pie7 from '../../cell/pie/pie-style-7'
import Pie8 from '../../cell/pie/pie-style-8'
import Pie9 from '../../cell/pie/pie-style-9'
import Pie10 from '../../cell/pie/pie-style-10'
import Pie11 from '../../cell/pie/pie-style-11'
import Pie12 from '../../cell/pie/pie-style-12'
export default {
  components: {
    'box-container': boxContainer,
    'pie-style-1': Pie1,
    'pie-style-2': Pie2,
    'pie-style-3': Pie3,
    'pie-style-4': Pie4,
    'pie-style-5': Pie5,
    'pie-style-6': Pie6,
    'pie-style-7': Pie7,
    'pie-style-8': Pie8,
    'pie-style-9': Pie9,
    'pie-style-10': Pie10,
    'pie-style-11': Pie11,
    'pie-style-12': Pie12,
  },
  data () {
    return {
      pieRadius1: {
        outside: ['25%', '45%'],
        center: ['15%', '25%'],
        inner: ['0%', '16%'],
      },
      eventTypeFetchData: [],
      caringObjectFetchData: [],
      eventHandlingData: [],
      spinShow1: true,
      spinShow2: true,
      spinShow3: true,
      activeRef: '',
    }
  },
  created () {
    // const _this = this
    // pie-style-1 fetch data
    this.$http.get('/pie/eventTypeSource')
      .then(res => {
        if (res.state && res.data) {
          this.eventTypeFetchData = res.data
          this.spinShow1 = false
        }
      })
      .catch(err => {
        console.log(err)
        this.$fetchMock('/static/mock/pie/eventTypeSource.json')
          .then(res => {
            this.eventTypeFetchData = res
            this.spinShow1 = false
          })
      })
    // pie-style-2 fetch data
    this.$http.get('/pie/caringObjectSource')
      .then(res => {
        if (res.state && res.data) {
          this.caringObjectFetchData = res.data
          this.spinShow2 = false
        }
      })
      .catch(err => {
        console.log(err)
        this.$fetchMock('/static/mock/pie/caringObjectSource.json')
          .then(res => {
            this.caringObjectFetchData = res
            this.spinShow2 = false
          })
      })
    // pie-style-3 fetch data
    this.$http.get('/pie/eventHandlingSource')
      .then(res => {
        if (res.state && res.data) {
          this.eventHandlingData = res.data
          this.spinShow3 = false
        }
      })
      .catch(err => {
        console.log(err)
        this.$fetchMock('/static/mock/pie/eventHandlingSource.json')
          .then(res => {
            this.eventHandlingData = res
            this.spinShow3 = false
          })
      })
  },
  methods: {
    showOption (ref) {
      console.log(JSON.parse(JSON.stringify(this.$refs[ref].option)))
    },
  },
}
</script>
<style lang="scss" scoped>
@import "./pie.scss";
</style>

